<template>
    <div class="edit-box">
        <el-divider content-position="left">容器配置</el-divider>
        <el-descriptions class="margin-top" :column="4" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        背景图(非必填)
                    </div>
                </template>
                <el-upload class="avatar-uploader" :action="`${$api}/common/upload/pic`" :headers="{
            token: $pinia.state.value.store.token
        }" :show-file-list="false" :on-success="handleImgSuccess">
                    <img v-if="main.bg_img" :src="$imgUrl + main.bg_img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                    <el-icon v-if="main.bg_img" class="img-close-icon" @click.stop="main.bg_img = ''">
                        <CircleClose />
                    </el-icon>
                </el-upload>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        背景色
                    </div>
                </template>
                <el-color-picker v-model="main.bg_color" show-alpha />
            </el-descriptions-item>

        </el-descriptions>

        <el-divider content-position="left">卡片配置</el-divider>
        <el-descriptions class="margin-top" :column="6" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        一屏商品个数
                    </div>
                </template>
                <el-radio-group v-model="main.goods_num" size="mini">
                    <el-radio :label="2" border>2个</el-radio>
                    <el-radio :label="3" border>3个</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        指示点颜色
                    </div>
                </template>
                <el-color-picker v-model="main.dot_color" show-alpha />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        指示点激活
                    </div>
                </template>
                <el-color-picker v-model="main.dot_act_color" show-alpha />
            </el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">商品配置</el-divider>
        <el-input v-model="main.ids" type="textarea" placeholder="请输条码 逗号隔开" size="mini"
            :autosize="{ minRows: 10, maxRows: 24 }" />
    </div>
</template>

<script setup name="BannerGoods">

const props = defineProps({
    info: {
        required: true,
        default: {
        }
    },
});

const data = reactive({
    main: {
        list: []
    }
})
const { main } = toRefs(data)
onMounted(() => {
    data.main = props.info
    if (!data.main.ids) {
        data.main['goods_num'] = 3
        data.main['dot_status'] = 1
    }
})
function handleImgSuccess(res) {
    if (res.code == 0) {
        data.main.bg_img = res.data.url
    }
}



</script>
<style lang="scss" scoped>
.edit-box {
    width: 100%;
    height: auto;
    padding: 20px;

    .margin-top {
        margin: 10px 0;
    }
}
</style>
